<template>
  <div class="baseChart" ref="chart"></div>
</template>

<script>
import { addResizeListener, removeResizeListener } from "@/utils/resize";
import { debounce } from "lodash";
import * as echarts from "echarts";
export default {
  name: "baseChart",
  props: {
    autoResize: {
      default: false
    },
    options: {
      default: () => {
        return {};
      }
    },
    dataZoomMove: {
      type: Object,
      default: () => {
        return {
          start: 0,
          end: 3
        };
      }
    },
    isLunxun: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      resizeListener: null,
      lunTimer: null
    };
  },
  mounted() {
    this.addResizeListener();
    this.init();
  },
  beforeDestroy() {
    removeResizeListener(this.resizeListener);
    if (this.lunTimer) {
      clearInterval(this.lunTimer);
    }
    this.chart = null;
    this.lunTimer = null;
  },
  watch: {
    options: {
      handler() {
        if (this.chart) {
          this.$nextTick(() => {
            this.setOption();
          });
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    init() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs["chart"]);
        this.chart.on("click", e => {
          this.$emit("chart-click", e);
        });
      }
      this.setOption();
    },
    addResizeListener() {
      this.resizeListener = addResizeListener(this.$el, () => {
        this.autoResize ? this.resize() : 1;
      });
    },
    setOption() {
      let that = this;
      if (this.chart) {
        this.chart.setOption(this.options);
        // return;
        if (this.isLunxun) {
          let dataZoomMove = Object.assign({}, this.dataZoomMove);
          let sdata = {
            value: this.options?.xAxis?.data
          };
          // 自动轮播和鼠标移入移出的停止和开启
          that.lunTimer = null;
          clearInterval(this.lunTimer);
          const startMoveDataZoom = (chart, dataZoomMove) => {
            that.lunTimer = setInterval(() => {
              dataZoomMove.start += 1;
              dataZoomMove.end += 1;
              if (dataZoomMove.end > sdata.value?.length - 1) {
                dataZoomMove.start = 0;
                dataZoomMove.end = that.dataZoomMove.end || 2;
              }
              chart.setOption({
                dataZoom: [
                  {
                    type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
                    startValue: dataZoomMove.start,
                    endValue: dataZoomMove.end
                  }
                ]
              });
            }, 5000);
          };
          startMoveDataZoom(that.chart, dataZoomMove);
          let chartDom = that.chart.getDom();
          chartDom.addEventListener("mouseout", () => {
            if (that.lunTimer) return;
            let dataZoomMove_get = that.chart.getOption().dataZoom[0];
            dataZoomMove.start = dataZoomMove_get.startValue;
            dataZoomMove.end = dataZoomMove_get.endValue;
            startMoveDataZoom(that.chart, dataZoomMove);
          });
          // 移入
          // this.chart.on
          chartDom.addEventListener("mouseover", () => {
            clearInterval(that.lunTimer);
            that.lunTimer = undefined;
          });
        }
      }
    },
    resize() {
      if (this.chart) {
        this.chart.resize();
      }
    }
    //   getActualWidth() {
    // 		let style = getComputedStyle(this.$el)
    // 		return this.width
    // 	}
  }
};
</script>

<style scoped lang="scss">
.baseChart {
  min-width: 100px;
  min-height: 100px;
  width: 100%;
  height: 100%;
}
</style>
